<template>
  <div>
    <van-nav-bar title="描述病情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="describe">
      <span style="background:#1cef0c;color:#fff">描述病情</span>
      <span>发送图片</span>
      <span>选择就诊人</span>
      <span>匹配医生</span>
    </div>
    <div class="bu">
      <img src="../../img/10.png" alt="">
    </div>
    <div class="chat">
      <div class="left">
        <div className='zuo' v-for="(message, index) in messages" :key="index">
          <img src='../../img/10.png' />
          <p>{{ message }}</p>
        </div>

      </div>
      <div class="right">
        <div className='you' v-for="(messages1, index) in messages1" :key="index">
          <img
            src='https://ts1.cn.mm.bing.net/th?id=OIP-C.VnqbqHI999-VVVkUOWBcMwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2' />
          <p>{{ messages1 }}</p>
        </div>

      </div>
      <div class="bottom">
        <input v-model="newMessage" placeholder="请用10-500字描述具体症状、惠病时长、用药情况、需要医生提供哪些帮助等" /><button @click="sendMessage">
          发送
        </button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const onClickLeft = () => history.back();
import { ref, reactive, onMounted } from 'vue'
const messages = ref<any>([])
const newMessage = ref<any>('')
const messages1 = ref<any>([])
const websocket = ref<WebSocket | null>(null);
const connectWebSocket = () => {
  websocket.value = new WebSocket('ws://localhost:3000')

  websocket.value.onmessage = (event: MessageEvent) => {
    console.log(event);

    messages.value.push(event.data)
  }
}
connectWebSocket()

const sendMessage = () => {
  if (newMessage.value && websocket.value) { // 确保websocket已连接
    websocket.value.send(newMessage.value);
    messages1.value.push(newMessage.value);
    newMessage.value = '';
  } else {
    console.error('WebSocket未连接或消息为空');
    // 这里可以添加一些用户提示，比如弹窗提示WebSocket未连接
  }
}
</script>

<style scoped lang="scss">
.describe {
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  span {
    width: 100px;
    height: 40px;
    background: #ccc;
    line-height: 40px;
    text-align: center;
  }
}

.bu {
  width: 96%;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 20px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}

.chat {
  width: 100%;
  height: 530px;
  background-color: #e6e6e6;

  display: flex;
  position: relative;
}

.left {
  width: 50%;
  height: 530px;

}

.right {
  width: 50%;
  height: 530px;

}

.zuo {
  height: '30px';
  display: flex;
  margin-top: 30px;
}

.zuo p {
  background-color: #fff;
  border-radius: 5px;
}

.zuo img {
  width: 30px;
  height: 30px
}

.you {
  height: '30px';
  display: flex;
  margin-top: 50px;
  flex-direction: row-reverse
}

.you p {
  background-color: #fff;
  border-radius: 5px;
}

.you img {
  width: 30px;
  height: 30px
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100%;
  text-align: center;
  display: flex;
  height: 70px;
  background: #fff;

  input {
    width: 80%;
    height: 60px;

    border: 1px solid #1fd712;
    padding-left: 20px;
    margin-left: 10px;
  }

  button {
    width: 80px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: #1fd712;
    margin-left: 10px;
  }
}
</style>